<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件--VUE</title>
		<script src="../assets/js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 使用componentFnName作为$emit的方法名的时候不行，但是简单的hello，say是可以的
					多个参数时组件绑定的方法参数必须是arguments，否则报错-->
			<button-counter title="FirstButton" @say="vmFnName(arguments)">
				<!-- 在组件模板中必须加入slot标签才可以使用 -->
				<h2>hello 这里是插槽的内容</h2>
			</button-counter>
			<button-counter title="SecondButton"></button-counter>
			<!-- 同时渲染多个组件，且使用v-bind动态绑定prop -->
			<blog-post v-for="post in posts" v-bind:key='post.id' :title="post.title"></blog-post>
		</div>
		<div id="app2">
			<todo-item v-for="item in groceryList" v-bind:key="item.id" v-bind:todo="item"></todo-item>
		</div>
		<script src="../assets/js/components.js"></script>
		<script type="text/javascript">
			// 声明一个名字叫button-conter的组件
			Vue.component('button-counter', {
				// 可以使用props想组件传递参数，作为组件的属性使用，比如title
				props: ["title"],
				data: function() {
					return {
						count: 0
					}
				},
				template: '<div><button v-on:click="countFN">{{title}}You clicked me {{ count }} times.</button><slot></slot></div>',
				methods: {
					countFN: function() {
						this.count++;
						this.$emit('say', this.count, false);
					}
				}
			});
			Vue.component('blog-post', {
				props: ['title'],
				template: '<div><h3>{{title}}</h3></div>'
			})
			var vm = new Vue({
				el: "#app",
				data: {
					posts: [
						{id: 1, title: 'My journey with Vue'},
						{id: 2, title: 'Blogging with Vue'},
						{id: 3, title: 'Why Vue is so fun'}
					]
				},
				methods: {
					vmFnName: function(args) {
						console.log(args);
					}
				},
				// 局部组件声明
				/* components:{
					com1:{
						template:"",
						data:{},
						props:[]
					}
				} */
			});
		</script>
	</body>
</html>
